<template>
	<view>
		<n-loading></n-loading>
		<div class="detail-title" v-if="newsInfo">
			<view class="newsTit">{{newsInfo.title}}</view>
			<view class="time">
				<text>{{getdate(newsInfo.created_at,1)}} </text>
				<view class="look-people">
					<u-icon name="eye" style="margin-right:10rpx" color="#999"></u-icon>{{newsInfo.view_count}}</span>
				</view>
			</view>
		</div>
		<!-- <img src="./../../static/index/indexbg.png" alt=""> -->
		<!-- <p class="detail-content">。</p> -->
		<u-parse :html="newsInfo.content" class="detail-content"></u-parse>
		<!-- <view class="newsContent">
			<rich-text :nodes="newsInfo.content"></rich-text>
		</view> -->
	</view>
</template>
<script>
export default{
	data() {
		return {
			newsInfo:null
		}
	},
	onLoad: function (option) {
		this.getNewsDetail(option.id);
	},
	methods: {
		getNewsDetail(id){
			this.apiget('/fun/article/view',{id:id}).then(res =>{
				if(res.data.status == 200 ) {
					this.newsInfo = res.data.data;
				}
			})
		}
	}
}
</script>

<style lang="scss">
	.detail-title{
		width: 100%;
		background-color: #fff;
		
		.newsTit{
			padding: 24rpx 32rpx;
			font-size: 32rpx;
			line-height: 48rpx;
			color: #333333;
		}	
		.time{
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666666;
			padding: 0 32rpx 18rpx;
			
			.look-people{
				float: right;
			}
		}
	}
	.newsContent{
		padding: 0 32rpx;
		
		img{
			max-width: 100%;
			// height: 190rpx;
		}
	}
	// img{
	// 	width: 100%;
	// 	height: 190rpx;
	// }
	.detail-content{
		// text-indent: 2rem;
		width: 90%;
		margin: 16rpx auto 0;
		color: #333333;
	}
</style>
